import { useWindowStore } from '../store/windowStore'
import { useCanvasStore } from '../store/canvasStore'
import './TopToolbar.css'

export default function TopToolbar() {
  const {
    opacity,
    isClickThrough,
    increaseOpacity,
    decreaseOpacity,
    toggleClickThrough,
    handleWindowControl
  } = useWindowStore()

  const { saveCanvas, loadCanvas, newCanvas } = useCanvasStore()

  const handleSave = async () => {
    try {
      await saveCanvas()
    } catch (error) {
      console.error('保存画布失败:', error)
    }
  }

  const handleOpen = async () => {
    try {
      await loadCanvas()
    } catch (error) {
      console.error('打开画布失败:', error)
    }
  }

  const handleNew = () => {
    // 如果当前画布有内容，显示确认对话框
    const { canvas } = useCanvasStore.getState()
    if (canvas && canvas.getObjects().length > 0) {
      const confirmed = window.confirm('当前画布有未保存的内容，是否确定要新建画布？')
      if (!confirmed) return
    }
    newCanvas()
  }

  return (
    <div className="top-toolbar-container">
      <div className="top-toolbar">
        <div className="toolbar-section drag-area">
          <div className="toolbar-item">
            <button onClick={handleNew} title="新建画布 (Ctrl+N)">
              <span className="icon">📄</span>
            </button>
            <button onClick={handleOpen} title="打开画布 (Ctrl+O)">
              <span className="icon">📂</span>
            </button>
            <button onClick={handleSave} title="保存画布 (Ctrl+S)">
              <span className="icon">💾</span>
            </button>
          </div>
          <div className="toolbar-item">
            <button onClick={decreaseOpacity} title="降低透明度 (F6)">
              <span className="icon">⊖</span>
            </button>
            <span className="opacity-value">{Math.round(opacity * 100)}%</span>
            <button onClick={increaseOpacity} title="提高透明度 (F7)">
              <span className="icon">⊕</span>
            </button>
          </div>
          <div className="toolbar-item">
            <button
              className={`click-through-btn ${isClickThrough ? 'active' : ''}`}
              onClick={toggleClickThrough}
              title={isClickThrough ? '点击穿透已开启 (F8)' : '点击穿透已关闭 (F8)'}
            >
              <span className="icon">{isClickThrough ? '👁️' : '👁️‍🗨️'}</span>
            </button>
          </div>
        </div>
        <div className="toolbar-section window-controls">
          <button onClick={() => handleWindowControl('minimize')} title="最小化">
            <span className="icon">🗕</span>
          </button>
          <button onClick={() => handleWindowControl('maximize')} title="最大化">
            <span className="icon">🗖</span>
          </button>
          <button onClick={() => handleWindowControl('close')} title="关闭" className="close-btn">
            <span className="icon">✕</span>
          </button>
        </div>
      </div>
    </div>
  )
} 